<template>
  <div class="outmain ba_f appointment">
    <div class="ba_f">
      <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
        <el-tab-pane label="预约订单" name="storeappointmentlist"></el-tab-pane>
        <el-tab-pane label="全部订单" name="storeappointmentorder"></el-tab-pane>
        <el-tab-pane label="预约设置" name="storeappointmentstoreset"></el-tab-pane>
      </el-tabs>
    </div>
    <div class="shuju_title mar_b20 mar_t20">
      <div class="shuju_title_text">
        <span>预约列表</span>
      </div>
    </div>
        <div class="mar_t20">
          <el-calendar v-model="timeValue" id="calendar">
            <template slot="dateCell" slot-scope="{date, data}">
              <div @click="changeTime(date,data)">
                <div>
                  <div class="t_c">
                    <div>{{ data.day.split('-').slice(1).join('-') }}</div>
                    <div class="mar_t10" v-if="dealMyDate(data.day)">预约单数：<span class="fon_18 wei color-green">{{dealMyDate(data.day)}}</span></div>
                  </div>
                </div>
              </div>
            </template>
          </el-calendar>
        </div>
  </div>
</template>
<script>
import {brandOrderList, operatStorage,yyOrder} from '@/api/plug';
import {mapState} from 'vuex'
import {changeDate,dateFormat} from "@/utils";
export default {
  // components: {Edit},
  mounted(){
  },
  created() {
    this.$nextTick(() => {
      // 点击前一个月
      let prevBtn = document.querySelector(
          ".el-calendar__button-group .el-button-group>button:nth-child(1)"
      );
      prevBtn.addEventListener("click", e => {
        let d = new Date(this.timeValue);
        let resDate = d.getFullYear() + '-' + this.handleTime((d.getMonth() + 1));//2020-08
        this.fetchData()
      })
      //点击下一个月
      let nextBtn = document.querySelector(
          ".el-calendar__button-group .el-button-group>button:nth-child(3)"
      );
      nextBtn.addEventListener("click", e => {
        let d = new Date(this.timeValue);
        let resDate = d.getFullYear() + '-' + this.handleTime((d.getMonth() + 1));//2020-10
        this.fetchData()
      })
      //点击今天
      let todayBtn = document.querySelector(
          ".el-calendar__button-group .el-button-group>button:nth-child(2)"
      );
      todayBtn.addEventListener("click", e => {
        let d = new Date(this.timeValue);
        let resDate = d.getFullYear() + '-' + this.handleTime((d.getMonth() + 1));//2020-09
        this.fetchData()
      })
    });
    this.fetchData();
  },
  computed: {
    ...mapState(['storeId']),
  },
  data() {
    return {
      activeName:'storeappointmentlist',
      timeValue: new Date(),
      calendarData:[],
      body:[
        {
          name:'大厅',
          weekArr:[
            {
              week:'周一',
              time:'2021-06-28',
              num:'',
              isAppointment:'1',
            },
            {
              week:'周二',
              time:'2021-06-28',
              num:'2',
              isAppointment:'1',
            },
            {
              week:'周三',
              time:'2021-06-28',
              num:'0',
              isAppointment:'2',
            },
          ],
        },
        {
          name:'包厢',
          weekArr:[
            {
              week:'周一',
              time:'2021-06-28',
              num:'',
              isAppointment:'1',
            },
            {
              week:'周二',
              time:'2021-06-28',
              num:'',
              isAppointment:'1',
            },
            {
              week:'周三',
              time:'2021-06-30',
              num:'',
              isAppointment:'1',
            },
          ],
        },
        {
          name:'VIP',
          weekArr:[
            {
              week:'周一',
              time:'2021-06-28',
              num:'',
              isAppointment:'1',
            },
            {
              week:'周二',
              time:'2021-06-28',
              num:'',
              isAppointment:'1',
            },
            {
              week:'周三',
              time:'2021-06-30',
              num:'',
              isAppointment:'1',
            },
          ],
        },
      ],
      form: {
        keyword: '',
        timeType: '1',
        time: [new Date(), new Date()],
      },
      list: [],
      listLoading: false,
      selectRows: '',
      elementLoadingText: '正在加载...',
      page: {
        total: 0,
        size: 10,
        currentPage: 1
      },
    };
  },
  methods: {
    handleClick() {
      if (this.activeName == 'storeappointmentlist') {
        this.$router.push({path: 'storeappointmentlist'});
      } else if (this.activeName == 'storeappointmentorder') {
        this.$router.push({path: 'storeappointmentorder'});
      }else if (this.activeName == 'storeappointmentstoreset') {
        this.$router.push({path: 'storeappointmentstoreset'});
      }
    },
    async fetchData() {
      this.listLoading = true;
      var params = {
        month: dateFormat(this.timeValue).substr(0,7),
        storeId:this.storeId,
      };
      const { data, count } = await yyOrder(params);
      this.calendarData = data;
      this.page.total = count;
      this.listLoading = false;
    },
    dealMyDate(v) {
      // console.log(v,this.calendarData)
      let len = this.calendarData.length
      let res = ""
      for(let i=0; i<len; i++){
        if(this.calendarData[i].time == v) {
          res = this.calendarData[i].num
          break
        }
      }
      return res
    },
    //处理时间
    handleTime(s) {
      return s < 10 ? '0' + s : s
    },
    //点击天数
    changeTime(date, data) {
      // console.log(date,data);
      this.$router.push(`/storeappointmentorder?day=${data.day}`);
    },
    handleCurrentChange(val) {
      this.page.currentPage = val;
      this.fetchData();
    },
    selectType() {
      this.fetchData();
    },
    handleEdit2(row) {
      if (row.id) {
        this.$refs["edit"].showEdit(row,1);
      } else {
        this.$refs["edit"].showEdit();
      }
    },
    linkPage(){

    },
    async handleEdit(id, type) {
      if (type == 'adopt') {
        const {msg} = await operatStorage({id, type,storeId:this.storeId,});
        this.$baseMessage(msg, "success");
        this.fetchData()
      } else if (type == 'reject') {
        this.$baseConfirm("您确定取消吗", null, async () => {
          const {msg} = await operatStorage({id, type,storeId:this.storeId,});
          this.$baseMessage(msg, "success");
          this.fetchData()
        });
      } else {
        this.$baseMessage('敬请期待', "success");
        this.fetchData()
      }
    },
    record(row) {
      this.$router.push(`/storagerecord?id=${row.id}`);
    },
  }
};
</script>
<style lang="scss" scoped>
  .appointment{
    .div-Calendar {
      width: 100%;
      height: 100%;
      box-sizing: border-box;
    }

    .calendar-day {
      text-align: center;
      //color: #202535;
      line-height: 30px;
      font-size: 12px;
    }

    .is-selected {
      color: #F8A535;
      font-size: 10px;
      margin-top: 5px;
    }
    .is-selected {
      color: #1989FA;
    }

    #calendar .el-button-group>.el-button:not(:first-child):not(:last-child):after {
      content: '当月';
    }
    //.tNumber {
    //  width: 170px;
    //  height: 100px;
    //}
    //.tNumber .top {
    //  border-radius: 5px;
    //  color: #fff;
    //}
    //.f-raw {
    //  display: flex;
    //  flex-direction: row;
    //  align-items: center;
    //  flex-wrap: wrap;
    //}
    //.zuohao{
    //  margin-top: 20px;
    //}
    //.addList .tit {
    //  border-bottom: none;
    //}
    //.alink:hover {
    //  color: #fff;
    //}
    //.yysl{
    //  margin: 10px 5px;
    //  color: #fff;
    //  font-size: 14px;
    //}
    //.today{
    //  width: 0;
    //  height: 0;
    //  position: absolute;
    //  top: 0px;
    //  right: 0px;
    //  border-top: 28px solid #FF3C44;
    //  border-left: 28px solid transparent;
    //}
    //.fontwz{
    //  position: absolute;
    //  top: 0px;
    //  right: 2px;
    //}
    //.orange{
    //  background-color: #1DBE60;
    //}
    //.blue{
    //  background-color: #909399;
    //}
    //.green{
    //  background-color: #FF6C44;
    //}
    //.dwnum{
    //  top: 5px;
    //  left: 15px;
    //}
    //.dwtime{
    //  right: 10px;
    //  bottom: 5px;
    //}
    //.dwstaic{
    //  top: 5px;
    //  right: 10px;
    //  padding: 3px 5px;
    //}
    //.orange2{
    //  background-color: #F4FCF7;
    //  color: #1ABF76;
    //  border-radius: 4px;
    //}
    //.blue2{
    //  background-color: #E1F3FF;
    //  color: #5D707E;
    //  border-radius: 4px;
    //}
    //.green2{
    //  background-color: #F9EBEB;
    //  color: #D17A73;
    //  border-radius: 4px;
    //}
  }
</style>
<!--<style>-->
<!--.el-calendar-table:not(.is-range) td.next, .el-calendar-table:not(.is-range) td.prev {-->
<!--  color: #333;-->
<!--}-->
<!--</style>-->
